import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link ,browserHistory} from 'react-router';
import api from '../api';
import {bind_change} from '../common/State';

import {message,Row,Col,Switch} from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
var QRCode = require('qrcode.react');

//导入常量
import cities from '../constants/cities';
import {ROLE_TYPE} from '../constants/index';

export default class StaffDetail extends React.Component {
  constructor(props, context){
      super(props, context);
      this.state={
          staff:{}
      };
  }

  componentWillMount(){
    let {id} = this.props.location.query||{};
    this.doGet(id)
  }

  componentDidUpdate() {
    var {staff} = this.state;
    // var qrcodedraw = new QRCode.qrcodedraw();
    // qrcodedraw.draw(document.getElementById('qrcode'),JSON.stringify(staff), function(error,canvas){
    //     if(error){
    //        message.error("发生错误");
    //     }
    // });
  }

  

  async doGet(id){
    var {
      staffResult
    } = await api('/authority/staff/get',{id});

    let staff = {};
    if(staffResult.cd==0){
      staff = staffResult.data;
    }

    let qrcodeStr = {} ;
    if(staff.phone && staff.roleNumber == 4){
        qrcodeStr = await this.requestQrcodeStr(staff.phone);
    }
    this.setState({
      staff,
      qrcodeStr:qrcodeStr.qrcodeStr||null
    });
  }

  //请求二维码
  async requestQrcodeStr(id){
    return await api('/weixin/product/qrcodeStr' , {id:`tel${id}`});
}

  render() {
    let {staff,qrcodeStr} = this.state;
    return (
        <div>
            <NavBar navs={[
              {title:'员工列表',href:'/staff/list'},
              {title:'员工详情'}
            ]} />
            <ContentBody className='container'> 
                <h2>员工基本信息</h2>
                <div className='height20'></div>
                <Row gutter={30}>
                  <Col span={12}>
                      <label style={style.labelWdith}>员工编号</label>
                      <span className='marginL20'>{staff.number}</span>  
                  </Col >
                  <Col span={12}>
                      <label style={style.labelWdith}>员工姓名</label>
                      <span className='marginL20'>{staff.name}</span>  
                  </Col >
                </Row>
                <Row gutter={30} className='marginT20'>
                  <Col span={12}>
                      <label style={style.labelWdith}>手机号码</label>
                      <span className='marginL20'>{staff.phone}</span>  
                  </Col >
                  <Col span={12}>
                      <label style={style.labelWdith}>电子邮箱</label>
                      <span className='marginL20'>{staff.email}</span>  
                  </Col >
                </Row>
                <Row gutter={30} className='marginT20'>
                  <Col span={12}>
                      <label style={style.labelWdith}>担任职务</label>
                      <span className='marginL20'>{staff.duty}</span>  
                  </Col >
                  <Col span={12}>
                      <label style={style.labelWdith}>所在部门</label>
                      <span className='marginL20'>{staff.department}</span>  
                  </Col >
                </Row>
                <Row gutter={30} className='marginT20'>
                  <Col span={12}>
                      <label style={style.labelWdith}>所在区域</label>
                      <span className='marginL20'>{staff.area}</span>  
                  </Col >
                  <Col span={12}>
                      <label style={style.labelWdith}>所在城市</label>
                      <span className='marginL20'>{staff.city}</span>  
                  </Col >
                </Row>
                <div className='height20'></div>
                <h2>员工权限信息</h2>
                <div className='height20'></div>
                <Row gutter={30} className='marginT20'>
                  <Col span={12}>
                      <label style={style.labelWdith}>角色类型</label>
                      <span className='marginL20'>{staff.roleName}</span>  
                  </Col >
                  <Col span={12}>
                      <label style={style.labelWdith}>是否开启</label>
                      <span className='marginL20'>{staff.isActive==1?'是':'否'}</span>  
                  </Col >
                </Row>

                
                {staff.roleNumber==4 && qrcodeStr?
                <div>
                    <Row gutter={30} className='marginT20'>
                        <Col span={12}>
                            <label style={style.labelWdith}>归属业务经理</label>
                            <span className='marginL20'>{staff.managerName||"--"}</span>  
                        </Col >
                    </Row>
                    <div className='height20'></div>
                    <h2>业务员二维码</h2>
                    <div className='height20'></div>
                    <Row gutter={30} >
                        <Col span={12}>
                            <label style={style.labelWdith}>&nbsp;</label>
                            <QRCode value={qrcodeStr} size={200}/> 
                    </Col >
                    </Row>
                </div>
                :null
                }
                
            </ContentBody>
        </div>
    )
  }
}
StaffDetail.contextTypes= { router: React.PropTypes.object.isRequired};

var style={
    labelWdith:{
      display:'inline-block',
      width:'100px',
      textAlign:'right'
    }
}
